<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Vue -->
  <script src="../js/vue.js"></script>
  <title>键盘事件</title>
</head>

<body>
  <!-- 
    Vue中常用的按键别名
      回车enter
      删除delete捕获"删除"和"退格"键
      退出esc
      空格space
      换行tab特殊,必须配合keydown去使用
      上up
      下down
      左left
      右right
    Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(多单词小写短横线写法)
    系统修饰键(用法特殊)ctrl alt shift meta (meta就是win键)
      a.配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才会被触发
      指定ctrl+y使用 @keyup.ctr.y
      b.配合keydown使用:正常触发事件
    也可以使用keyCode去指定具体的按键(不推荐)
    Vue.config.keyCodes.自定义键名 = 键码,也可以去定制化按键别名
   -->
  <!-- 创建一个容器 -->
  <div id="root">
    <h2>欢迎来{{city.toUpperCase()}}发财</h2>

    <input type="text" placeholder="按下回车提示输入" @keyup="showInput">
    <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInput1">
    <input type="text" placeholder="按下删除/退格提示输入" @keyup.delete="showInput1">
    <input type="text" placeholder="按下ctrl+c提示输入" @keyup.ctr.c="showInput2">
  </div>

  <script>
    Vue.config.productionTip = false

    // 创建一个实例
    new Vue({
      el: '#root',
      data() {
        return {
          city: 'guangdong'
        }
      },
      methods: {
        showInput(e) {
          if (e.keyCode !== 13)
           return
          console.log(e.target.value)

          // console.log(e.keyCode)//按键编码
          // console.log(e.target.value)
        },
        showInput1(e){
          console.log(e.target.value)
          // alert('禁止搬运!!!')
        },
        showInput2(e){
          // console.log(e.target.value)
          alert('禁止搬运!!!')
        }
      }
    })
  </script>
</body>

</html>